<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户页</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/element.css">
</head>
<body style="background-color: #ddd">
<div id="wrapper">
    <!--        头部-->
    <el-row style="height: 50px; background-color: black; line-height: 50px; color: white;">
        <el-col :span="22"><div style="font-size: 30px; margin-left: 20px;"><a href="/index.html">LOGO</a></div></el-col>
        <el-col :span="2" style="text-align: right">
            <el-dropdown>
                <el-button type="primary" style="margin-right: 10px">{{user.username}}</el-button>
                <el-dropdown-menu slot="dropdown">
                    <a href="/person.html" style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a>
                    <a @click="logout" href="#" style="display:block; width: 100px;  text-align: center; color: black">退出</a>
                </el-dropdown-menu>
            </el-dropdown>

        </el-col>
    </el-row>


    <!--        表格-->
    <el-row style="margin-top: 10px">
        <el-col :span="16" :offset="4">
            <div style="color: black; font-size: 20px; margin: 10px 0">软件用户</div>
            <el-button @click="javascrtpt:window.location.href='/index.html'" type="primary" size="mini" style="margin: 10px 5px" plain>
                user表
            </el-button>
            <el-button @click="javascrtpt:window.location.href='/tab_loc.html'" type="primary" size="mini" style="margin: 10px 5px" plain>
                location表
            </el-button>
            <el-button @click="javascrtpt:window.location.href='/tab_mete.html'" type="primary" size="mini" style="margin: 10px 5px" plain>
                meteorology表
            </el-button>
            <el-button @click="javascrtpt:window.location.href='/tab_owner.html'" type="primary" size="mini" style="margin: 10px 5px" plain>
                owner表
            </el-button>
            <el-button @click="javascrtpt:window.location.href='/tab_proj.html'" type="primary" size="mini" style="margin: 10px 5px" plain>
                project表
            </el-button>
            <el-button @click="javascrtpt:window.location.href='/tab_area.html'" type="primary" size="mini" style="margin: 10px 5px" plain>
                pv_area表
            </el-button>
            <el-button @click="javascrtpt:window.location.href='/tab_boos.html'" type="primary" size="mini" style="margin: 10px 5px" plain>
                pv_booster表
            </el-button>
            <el-button @click="javascrtpt:window.location.href='/tab_sys.html'" type="primary" size="mini" style="margin: 10px 5px" plain>
                pv_system表
            </el-button>

            <div style="height: 1px; background-color: white"></div>
            <el-button @click="add" type="primary" size="mini" style="margin: 10px 0">新增</el-button>
            <el-button @click="exp" type="primary" size="mini" style="margin: 10px 0">导出</el-button>


            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="项目ID"
                >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                >
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                >
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="电话">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" type="text" v-show="user.authority== 1">编辑</el-button>
                        <el-button @click="del(scope.row.id)" v-show="user.authority== 1" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="background-color: white">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[5, 10, 20, 40]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

            <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%"
                       close-on-click-modal="false" close-on-press-escape="false" show-close="false">
                <el-form :model="entity">
                    <el-form-item label="用户名" label-width="100px">
                        <el-input v-model="entity.username" autocomplete="off" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" label-width="100px">
                        <el-input v-model="entity.email" autocomplete="off" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" label-width="100px">
                        <el-input v-model="entity.tel" autocomplete="off" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="权限" label-width="100px">
                        <el-input v-model="entity.authority" autocomplete="off" style="width: 80%"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </div>
            </el-dialog>
        </el-col>
    </el-row>

</div>

<script src="/js/jquery.min.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/element.js"></script>

<script>
        let urlBase = "/user/";
        new Vue({
            el: "#wrapper",
            data: {
                user: {},
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                dialogFormVisible: false,
                showTag: '',
                entity: {}
            },
            created() {
              this.user = JSON.parse(localStorage.getItem("user"));
              console.log(this.user);
              if(this.user.authority == 1){
                this.loadTable();
<!--            	  location.href = "/login.html";-->
              }
            },
            methods: {
                logout() {
                    localStorage.removeItem("user");
                    location.href = "/login.html";
                },
                loadTable() {
                    $.get(urlBase + "/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(res => {
                        this.tableData = res.data.content;
                        this.total = res.data.totalElements;
                    })
                },
                exp() {
                    window.open(urlBase + "/export");
                },
                handleSizeChange(pageSize) {
                    this.pageSize = pageSize;
                    this.loadTable();
                },
                handleCurrentChange (pageNum) {
                    this.pageNum = pageNum;
                    this.loadTable();
                },
                add() {
                    this.entity = {};
                    this.showTag = 'add';
                    this.dialogFormVisible = true;
                },
                save() {
                    let type = this.entity.id ? "PUT": "POST";
                    if(this.showTag === 'add')
                        this.$set(this.entity, 'password', '123456');
                    $.ajax({
                        url: urlBase,
                        type: type,
                        contentType: "application/json",
                        data: JSON.stringify(this.entity)
                    }).then(res => {
                        if (res.code === '0') {
                            this.$message({
                                message: "保存成功",
                                type: "success"
                            });
                            this.loadTable();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                        this.dialogFormVisible = false;
                    })
                },
                edit(obj) {
                    this.entity = obj;
                    this.showTag = 'edit';
                    this.dialogFormVisible = true;
                },
                del(id) {
                    $.ajax({
                        url: urlBase + id,
                        type: "delete"
                    }).then(res => {
                        if (res.code === '0') {
                            this.$message({
                                message: "删除成功",
                                type: "success"
                            })
                            this.loadTable();
                        } else {
                            this.$message({
                                message: res.msg,
                                type: "error"
                            })
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>
